<template>
	<div class="user-info">
		<div class="signatureBox-popup" :style="{ 'z-index': zIndex }">
			<div class="popup2">
				<div class="signatureBox">
					<div class="canvasBox" ref="canvasHW">
						<div style="padding-top: 20px" class="input_text">
							请在下面空白区域签名
						</div>
						<div
							style="padding-top: 10px; color: #ff0045; font-size: 12px"
							class="input_text"
						>
							必须由本人签字，违者将承担法律责任
						</div>
						<canvas
							ref="canvasF"
							@touchstart="touchStart"
							@touchmove="touchMove"
							@touchend="touchEnd"
							@mousedown="mouseDown"
							@mousemove="mouseMove"
							@mouseup="mouseUp"
						></canvas>
						<!-- <div class="btnBox"> -->
						<!-- <div @click="overwrite">重写</div> -->
						<!-- <div @click="commit">提交签名</div> -->
						<!-- </div> -->
					</div>
				</div>
				<div style="padding-bottom: 20px; background-color: #fff">
					<button
						style="
							border: none;
							border-radius: 20px;
							color: #fff;
							padding: 5px;
							margin-left: 20px;
							float: left;
							background: #0798ea;
							width: 23%;
						"
						@click="commit"
					>
						确定
					</button>
					<button
						style="
							border: none;
							border-radius: 20px;
							color: #fff;
							padding: 5px;
							background: #b9bfd3;
							width: 23%;
						"
						@click="overwrite"
					>
						清除
					</button>
					<button
						style="
							border: none;
							border-radius: 20px;
							color: #fff;
							padding: 5px;
							margin-right: 20px;
							float: right;
							background: #b9bfd3;
							width: 23%;
						"
						@click="Canvas_goBack"
					>
						取消
					</button>
				</div>
			</div>
			<!-- <div class="popup_title">
          <div class="popup_title_">请输入证书信息</div>
        </div> -->

			<!-- </van-popup> -->
		</div>

		<!-- <img class="imgCanvas" :src="imgUrl"> -->
		<van-field class="input_text" style="margin-bottom: 5px" name="uploader">
			<template #input>
				<div style="padding-right: 20px" class="input_text">签名</div>
				<div
					class="color-blue"
					@click="AddCertificate('MarkSignAttach')"
					v-if="!imgUrl"
				>
					点击签名
				</div>
				<eagle-image
					@click="preview(baseUrl + imgUrl)"
					class="imgCanvas"
					:src="baseUrl + imgUrl"
					v-if="imgUrl"
				/>
				<div
					class="ml-10 color-blue"
					@click="empty('MarkSignAttach')"
					v-if="imgUrl"
				>
					删除
				</div>
				<!-- <van-uploader
          v-model="imgUrl"
          :max-count="1"
          :after-read="beforeRead"
          :before-delete="beforedelete"
        /> -->
			</template>
		</van-field>

		<van-field class="input_text">
			<template #input>
				<eagle-button
					class="br-5"
					block
					type="info"
					@click="onSubmit(true)"
					style="margin-left: 5px"
					>提交</eagle-button
				>
			</template>
		</van-field>
		<eagle-overlay :show="showImg">
			<div class="imageShow" @click="showImg = false">
				<van-image width="100%" :src="imagePath" />
			</div>
		</eagle-overlay>
	</div>
</template>
<script>
import store from '@/store/index'
// import {  base64ToPath } from 'image-tools'

export default {
	data() {
		return {
			showImg: false,
			imagePath: '',
			baseUrl: process.env.VUE_APP_BASE_API,
			id: this.$route.query.id,
			TypeName: this.$route.query.TypeName,
			adds: '',
			zIndex: -8,
			isCertificate: true,
			isCertificate2: false,
			stageInfo: '',
			imgUrl: '',
			imgUrl2: '',
			imgUrl3: '',
			client: {},
			points: [],
			canvasTxt: null,
			startX: 0,
			startY: 0,
			moveY: 0,
			moveX: 0,
			endY: 0,
			endX: 0,
			w: null,
			h: null,
			isDown: false,
			isViewAutograph: this.$route.query.isViews > 0,
			contractSuccess: this.$route.query.contractSuccess,
		}
	},
	created() {
		this.GuidelineEntrustedReg()
	},
	mounted() {
		//        //防止页面后退
		// history.pushState(null, null, document.URL)
		// window.addEventListener('popstate', function () {
		// 	history.pushState(null, null, document.URL)
		// })
		let canvas = this.$refs.canvasF
		canvas.height = this.$refs.canvasHW.offsetHeight - 500
		canvas.width = this.$refs.canvasHW.offsetWidth - 50
		this.canvasTxt = canvas.getContext('2d')
		this.stageInfo = canvas.getBoundingClientRect()
	},

	methods: {
		// 签名信息
		GuidelineEntrustedReg() {
			let _this = this
			_this.$axios
			.get("/GuidelineEntrustedReg/GetSignInfo",{params:{id: _this.id}})
			.then((res) => {
				_this.imgUrl = res.data.MarkSignAttach
				_this.imgUrl2 = res.data.AuditSignAttach
				_this.imgUrl3 = res.data.ApproveSignAttach
			})
		},
		preview(arry) {
			this.showImg = true
			this.imagePath = arry
		},
		empty(emptyStr) {
			if (emptyStr == 'MarkSignAttach') {
				this.imgUrl = ''
			} else if (emptyStr == 'AuditSignAttach') {
				this.imgUrl2 = ''
			} else if (emptyStr == 'ApproveSignAttach') {
				this.imgUrl3 = ''
			}
		},
		calcTitle() {
			let isSignature = this.$route.query.isSignature
			let title
			if (isSignature == 'forSignature') {
				title = '安全生产制度汇编[签名]'
			} else if (isSignature == 'isSignature') {
				title = '规章制度(程序)签名'
			}
			store.commit('updateTitle', title)
		},
		GuidelineRegCommonCompileGetSignInfo() {
			let _this = this
			_this.$axios
			.get("/GuidelineRegCommonCompile/GetSignInfo/{id}",{params:{id: _this.id }})
			.then((res) => {
				_this.imgUrl = res.data.MarkSignAttach
				_this.imgUrl2 = res.data.AuditSignAttach
				_this.imgUrl3 = res.data.ApproveSignAttach
			})
		},

		//提交签名
		onSubmit(bool) {
			// params.append('file', file.file)
			let _this = this
			var data = {
				id: _this.id,
				attachs: _this.imgUrl,
			}
			_this.$axios
			.post("/ExExamUserPaper/Sign",data)
			.then((res) => {
				_this.$router.push('/Train/ExamResult?id=' + _this.id)
			})
			.catch((err) => {
				console.log('err', err)
			})
		},

		AddCertificate(add) {
			this.adds = add
			this.zIndex = 8
			this.isCertificate = true
			this.isCertificate2 = true
			this.overwrite()
		},
		Canvas_goBack() {
			this.zIndex = -8
			this.isCertificate = false
			this.isCertificate2 = false
		},
		//mobile
		touchStart(ev) {
			ev = ev || event
			ev.preventDefault()
			if (ev.touches.length == 1) {
				let obj = {
					x: ev.targetTouches[0].clienX,
					y: ev.targetTouches[0].clientY,
				}
				this.startX = obj.x
				this.startY = obj.y
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.points.push(obj)
			}
		},
		touchMove(ev) {
			ev = ev || event
			ev.preventDefault()
			if (ev.touches.length == 1) {
				let obj = {
					x: ev.targetTouches[0].clientX - this.stageInfo.left,
					y: ev.targetTouches[0].clientY - this.stageInfo.top,
				}
				this.moveY = obj.y
				this.moveX = obj.x
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.startY = obj.y
				this.startX = obj.x
				this.points.push(obj)
			}
		},
		touchEnd(ev) {
			ev = ev || event
			ev.preventDefault()
			if (ev.touches.length == 1) {
				let obj = {
					x: ev.targetTouches[0].clientX - this.stageInfo.left,
					y: ev.targetTouches[0].clientY - this.stageInfo.top,
				}
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.points.push(obj)
			}
		},
		//pc
		mouseDown(ev) {
			ev = ev || event
			ev.preventDefault()
			if (1) {
				let obj = {
					x: ev.offsetX,
					y: ev.offsetY,
				}
				this.startX = obj.x
				this.startY = obj.y
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.points.push(obj)
				this.isDown = true
			}
		},
		mouseMove(ev) {
			ev = ev || event
			ev.preventDefault()
			if (this.isDown) {
				let obj = {
					x: ev.offsetX,
					y: ev.offsetY,
				}
				this.moveY = obj.y
				this.moveX = obj.x
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.startY = obj.y
				this.startX = obj.x
				this.points.push(obj)
			}
		},
		mouseUp(ev) {
			ev = ev || event
			ev.preventDefault()
			if (1) {
				let obj = {
					x: ev.offsetX,
					y: ev.offsetY,
				}
				this.canvasTxt.beginPath()
				this.canvasTxt.moveTo(this.startX, this.startY)
				this.canvasTxt.lineTo(obj.x, obj.y)
				this.canvasTxt.stroke()
				this.canvasTxt.closePath()
				this.points.push(obj)
				this.points.push({ x: -1, y: -1 })
				this.isDown = false
			}
		},
		//重写
		overwrite() {
			this.canvasTxt.clearRect(
				0,
				0,
				this.$refs.canvasF.width,
				this.$refs.canvasF.height
			)
			this.points = []
		},
		// 上传图片
		afterRead(base64) {
			var params = {
				Img: base64,
			}
			let _this = this;
			_this.$axios
			.post("/CommonAttach/UploadBase64",params)
			.then((res) => {
				_this.imgUrl = res.data.FilePath
			})
			.catch((err) => {
				console.log('err', err)
			})
		},
		//提交签名
		commit() {
			//   if (this.adds == "MarkSignAttach") {
			//     this.imgUrl = this.$refs.canvasF.toDataURL();
			//   } else if (this.adds == "AuditSignAttach") {
			//     this.imgUrl2 = this.$refs.canvasF.toDataURL();
			//   } else if (this.adds == "ApproveSignAttach") {
			//     this.imgUrl3 = this.$refs.canvasF.toDataURL();
			//   }
			this.afterRead(this.$refs.canvasF.toDataURL())
			this.zIndex = -8
		},
	},
}
</script>

<style scoped>
.popup2 {
	width: 100%;
	height: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	text-align: center;
	border-radius: 7px;
}
.user-info {
	min-height: calc(100vh - 40px);
	background-color: #fff;
}
.imgCanvas {
	/* background-color: #71b900; */
	border: 1px solid #7d7d7d;
	width: 50px;
	height: 50px;
}
.signatureBox-popup {
	opacity: 1;
	background: #666;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	padding-top: 150px;
}

.signatureBox {
	width: 100%;
	height: calc(100% - 50px);
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	height: 60%;
	z-index: 9;
	display: inline-flex;
	flex-direction: column;
}
.canvasBox {
	box-sizing: border-box;
	flex: 1;
	height: 100%;
}
canvas {
	margin: 20px;
	width: 90%;
	height: 150px;
	border: 1px solid #7d7d7d;
}
.btnBox {
	padding: 10px;
	text-align: center;
}
.btnBox button:first-of-type {
	background: transparent;
	border-radius: 4px;
	height: 40px;
	width: 80px;
	font-size: 14px;
}
.btnBox button:last-of-type {
	background: #71b900;
	color: #fff;
	border-radius: 4px;
	height: 40px;
	width: 80px;
	font-size: 14px;
}
.van-image {
	background: #fff !important;
}
</style>